<template>
	<view class="add page c00">
		<view class="bgf7 p12">
			<view class="bgff px14 pb10">

				<view class="flex flexC borb py12">
					<text class="flex1">所属店铺</text>
					<view class="py3">{{selectShop.name}} </view>

				</view>

				<view class="flex flexC borb py12">
					<text class="flex1">名字</text>
					<input v-model="name" class="aliR py3" placeholder="请输入台桌的名字" />
					<text class="arrowR ml3"></text>

				</view>

				<view class="flex flexC borb py12">
					<text class="flex1">最低消费</text>
					<input v-model="min_pay" type="digit" class="py3 aliR" placeholder="请输入最低消费金额" />
					<text class="arrowR ml3"></text>
				</view>
				
				
				<view class="flex flexC borb py12">
					<text class="flex1">押金</text>
					<input v-model="ya_amount" type="digit" class="py3 aliR" placeholder="请输入押金" />
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC  borb py12" @click="updateLogo">
					<text class="flex1">LOGO</text>
					<image class="w48 " :src="logo_url" mode="aspectFill"></image>
					<text class="arrowR ml3"></text>
				</view>



				<view class="flex flexC mt20  py12">
					<text class="flex1 bold6">时间区间</text>
					<view class="py3 bold6"> 金额/小时</view>
				</view>

				<view class="flex flexC borb py12">
					<input class="flex1 " v-model="time1" placeholder="17:00~09:00"></input>
					<input v-model="price1" type="digit" class="py3 aliR" placeholder="28.8元/60分钟" />
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC  py12">
					<input class="flex1" v-model="time2" placeholder="09:00~17:00"></input>
					<input v-model="price2" type="digit" class="py3 aliR" placeholder="19.9元/60分钟" />
					<text class="arrowR ml3"></text>
				</view>
			

			


			</view>
			<view class="flex flexC flexJC py20">
				<view class="aliC py12 w-17 bg41 r40" @click="save">保存</view>
			</view>



		</view>



		<uni-popup ref="tagPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="doDelTag()">删除</button>

				<view class="popup-btn" @click="$refs.tagPop.close()">取消</view>
			</view>

		</uni-popup>

		<hFormAlert v-if="tagShow" title="添加标签" placeholder="请输入添加标签" @confirm="confirm" @cancel="cancel"></hFormAlert>


	</view>
</template>

<script>
	import hFormAlert from '@/components/h-form-alert/h-form-alert.vue';

	export default {
		components: {
			hFormAlert
		},
		data() {
			return {
				tagShow: false,
				shop_id: '',
				name: '',
				logo_path: '',
				min_pay:'',
				ya_amount:'',
				logo_url: '../../static/logo.jpeg',
				selectShop: null,
				time1:'17:00~09:00',
				price1:'',
				time2:'09:00~17:00',
				price2:''
			};
		},
		onLoad(option) {
			this.shop_id = option.id;
			var select = option.selectShop;
			if (select != "") {
				this.selectShop = JSON.parse(select);
				this.shop_id = this.selectShop.id;
			}
		},

		onShow() {

		},
		methods: {



			updateLogo() {
				let that = this;
				this.uploadType = "image";
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], //从相册选择
					success: function(res) {
						//console.log(JSON.stringify(res.tempFilePaths));
						let images = res.tempFilePaths; //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
						for (var i = 0; i < images.length; i++) {
							let tImg = images[i];
							that.upload(tImg, 'logo');
						}
					}
				});
			},

			addCover() {
				let that = this;
				this.uploadType = "image";
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], //从相册选择
					success: function(res) {
						//console.log(JSON.stringify(res.tempFilePaths));
						let images = res.tempFilePaths; //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
						for (var i = 0; i < images.length; i++) {
							let tImg = images[i];
							that.upload(tImg, 'cover');
						}
					}
				});
			},


			upload(img, type) {

				let that = this;
				uni.showLoading({
					title: "上传中"
				})
				uni.uploadFile({
					url: this.$uploadUrl,
					filePath: img,
					name: 'file',
					success: (uploadFileRes) => {

						uni.hideLoading();
						var res = uploadFileRes.data;

						// 根据接口具体返回格式   赋值具体对应url
						var url = JSON.parse(res).data.fullurl;
						var uploadUrl = JSON.parse(res).data.url;
						if (type == 'logo') {
							that.logo_url = url;
							that.logo_path = uploadUrl;
						} else {
							that.coverList.push(url);
							that.coverPath.push(uploadUrl)
						}
					}
				});

			},



			save() {

				if (this.name == '') {

					uni.showToast({
						title: "请填写包厢名",
						icon: 'none'
					})
					return;
				}
				
				if (this.logo_path == "") {

					uni.showToast({
						title: "请上传logo",
						icon: 'none'
					})
					return;
				}
				
				if (this.min_pay == "") {
				
					uni.showToast({
						title: "请输入最小消费金额",
						icon: 'none'
					})
					return;
				}
				if (this.ya_amount == "") {
				
					uni.showToast({
						title: "请输入押金",
						icon: 'none'
					})
					return;
				}

				if (this.time1 == "" || this.price1 == '' || this.time2 == '' || this.price2 == "") {
				
					uni.showToast({
						title: "请输入收费规则",
						icon: 'none'
					})
					return;
				}
			
				let param = {
					shop_id: this.shop_id,
					name: this.name,
					min_pay: this.min_pay,
					ya_amount: this.ya_amount,
					logo: this.logo_path,
					time1: this.time1,
					price1: this.price1,
					time2: this.time2,
					price2: this.price2,
				};
				let that = this;
				this.$api.tableAdd(param).then(res => {

					if (res.code == 1) {
						uni.showModal({
							title: "添加提示",
							content: "添加成功",
							showCancel: false,
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add {
		.w48 {
			width: 96rpx;
			height: 96rpx;
		}

		.imgbox {
			width: 164rpx;
			height: 164rpx;
			background-color: #E8E8E8;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
				background: rgba(181, 180, 180, .8);
				position: absolute;
				top: -12rpx;
				right: -12rpx;
			}
		}
	}

	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>